<template>
    <div class='about'>
		<MainContentPc :outBg="bannerBg" class="banner">
			<div class="main">
				<div class="inner">
					<div class="title">{{ currentNavObj?.name }}</div>
					<div class="title2">About Harmony</div>
				</div>
			</div>
		</MainContentPc>

		<MainContentPc>
			<div class="ctx-main">
				<div class="nav">
					<NavBar @change="selectFn" :navList="navbar.children" :current="actived"/>
				</div>
				<div class="content">
					<div class="breadCrumbs">
						<span>{{ breadCrumb }}</span>
						<span style="color:rgb(252, 169, 44)">{{ currentNavObj?.name }}</span>
					</div>
					<div class="content">
						<slot></slot>
					</div>
				</div>
			</div>
		</MainContentPc>
    </div>
</template>

<script setup lang="ts">
import bannerBg from '@/assets/images/about-banner-bg.jpg'
import NavBar from './modules/NavBar.vue'
const props = defineProps({
	navbar:{
		type:Object as () => {
			children:Array<{
				name: string,
				id: number,
			}>,
			name: string,
			id: number
		},
		required:true,
	},
})

const actived = defineModel<number>()
const emits = defineEmits(['change'])
const selectFn = (id:number)=>{
    emits('change',id)
	actived.value = id
}
const currentNavObj = computed(()=>{
	return props.navbar.children?.find(item=>item.id === actived.value) || { name: 'Home', id: 0}
})
// 面包屑文字
const breadCrumb = computed<string>(()=>{
	return '主页 / ' + props.navbar.name + ' / '
})
</script>
<style lang="scss" scoped>
.banner{
  .main{
	  height: 100%;
	  position: relative;
	  .inner{
		  position: absolute;
		  bottom: 50px;
		  left: 0;
		  color: #d3ad6f;
		  .title{
			  font-size: 36px;
		  }
		  .title2{
			  border-top: 1px solid #d3ad6f;
			  padding-top: 10px;
			  margin-top: 10px;
			  font-size: 24px;
		  }
	  }
  }
}
.ctx-main{
	display: flex;
	margin-bottom: 200px;
	width: 100%;
	.nav{
		width: 300px;
		background-color: #f6f6f6;
		border: 1px solid #ddd;
		font-size: 18px;
		color: #666;
	}
	>.content{
		flex: 1;
		padding-left: 60px;
		.breadCrumbs{
			padding: 20px 0;
			border-bottom: 1px solid #e8e8e8;
			margin-bottom: 20px;
		}
	}
}
</style>